import { View, Text, Image } from "@tarojs/components";
import ico_edt_two from "@/assets/image/ico_edt_two.svg";
import ico_fenlei from "@/assets/image/ico_fenlei.svg";
import icon_denj_one from "@/assets/image/icon_denj_one.jpg";
import arrayIcon from "@/assets/image/ico_jiantou_one.svg";
import "./index.scss";
import { routes } from "@/constants/routes";
import { link, preview, formatDateTime, makePhoneCall } from "@/helper/utils";
import { useEffect, useState } from "react";
import { talkGet } from "@/services/entities/all";
import { useDidShow, useReachBottom } from "@tarojs/taro";
import { getGlobalData } from "@/global_data";
import ico_phone from "@/assets/image/ico_phone.svg";

const BusinessDynamic = () => {
  const [page, setPage] = useState(1);
  const [city] = useState("");
  const [list, setList] = useState<any>([]);
  const getList = (pageNum) => {
    talkGet({ currentPage: pageNum, pageSize: 10, city: city }).then(
      (res: any) => {
        console.log("res22.", res);
        if (pageNum === 1) {
          setList(res.records);
        } else {
          setList((old) => {
            return [...old, ...res.records];
          });
        }
      }
    );
  };

  useReachBottom(() => {
    if (page * 10 === list.length) {
      setPage((old) => old + 1);
    }
  });

  useEffect(() => {
    getList(page);
  }, [page]);

  useDidShow(() => {
    setPage(1);
    getList(1);
  });

  return (
    <View className="business-dynamic-container bg-page">
      <View className="dis-flex justify-between pd-tb-32 pd-lr-24 bg-ffffff">
        <View className="dis-flex align-center">
          <Text className="fs-28 lh-38 cl-black">四川省</Text>
          <Image src={arrayIcon} className="img-32 ml-8 img-rotate" />
        </View>
        <View className="dis-flex align-center">
          <Image src={ico_edt_two} className="img-38" />
          <Text
            className="ml-8 fs-28 lh-38 cl-black"
            onClick={() => {
              const userInfo = getGlobalData("userInfo");
              if (userInfo?.auth) {
                link(routes.ROUTES_RELEASE_DYNAMIC);
              } else {
                link(routes.ROUTES_VERIFY);
              }
            }}
          >
            发布
          </Text>
        </View>
      </View>
      <View className="flex-column pd-lr-16">
        {list?.map((item, index) => (
          <View
            className="flex-column pd-18 border-box bg-ffffff br-8 mt-16"
            key={index}
          >
            <View className="dis-flex align-center">
              <Text className="fs-40 lh-42 cl-black">{item.storeName}</Text>
              <Image src={icon_denj_one} className="img-36 ml-8" />
            </View>
            <View className="fs-30 lh-32 cl-black mt-24 mb-24">
              {item.title}
            </View>
            <View className="dis-flex flex-wrap gap-16">
              {item.imageUrl?.split(",").map((image, idx) => {
                return (
                  <Image
                    src={image}
                    onClick={() => {
                      preview(image, item.imageUrl?.split(","));
                    }}
                    className="img-156 br-8"
                    key={idx}
                  />
                );
              })}
            </View>
            <View className="dis-flex align-center justify-between mt-32">
              <View className="dis-flex align-center">
                <Image src={ico_fenlei} className="img-32" />
                <Text className="ml-8 fs-28 lh-32 cl-007DDB">
                  发布时间：{formatDateTime(item.createTime)}
                </Text>
              </View>
              <View
                className="dis-flex align-center"
                onClick={() => {
                  makePhoneCall(item.storePhone);
                }}
              >
                <Text className="ml-8 fs-28 lh-32 cl-007DDB">
                  {item.storePhone}
                </Text>
                <Image src={ico_phone} className="img-62 ml-8" />
              </View>
            </View>
          </View>
        ))}
      </View>
    </View>
  );
};

export default BusinessDynamic;
